import React from 'react';
import { useThemeStore } from '../../stores/themeStore';
import './customComponents.css';

interface CustomTagProps {
  children: React.ReactNode;
  color?: 'default' | 'success' | 'processing' | 'error' | 'warning' | 'blue' | 'volcano';
  icon?: React.ReactNode;
  className?: string;
}

const CustomTag: React.FC<CustomTagProps> = ({ 
  children, 
  color = 'default',
  icon,
  className = ''
}) => {
  const { mode } = useThemeStore();

  // Determine tag classes
  const getTagClasses = () => {
    const classes = ['custom-tag', color];
    
    if (className) {
      classes.push(className);
    }
    
    return classes.join(' ');
  };

  return (
    <span className={getTagClasses()}>
      {icon && <span className="mr-1">{icon}</span>}
      {children}
    </span>
  );
};

export default CustomTag;